<template>
  <div class="switch-demo">
    <h2>开关Switch组件演示</h2>

    <div class="demo-section">
      <h3>基础用法</h3>
      <div class="demo-row">
        <SwitchComponent v-model="basicSwitch" />
        <span>状态: {{ basicSwitch ? "开启" : "关闭" }}</span>
      </div>
    </div>

    <div class="demo-section">
      <h3>带标签的开关</h3>
      <div class="demo-items">
        <SwitchComponent v-model="wifiSwitch" label="WiFi连接" />
        <SwitchComponent v-model="bluetoothSwitch" label="蓝牙" />
        <SwitchComponent v-model="locationSwitch" label="位置服务" />
      </div>
      <div class="status-info">
        <p>WiFi: {{ wifiSwitch ? "已连接" : "未连接" }}</p>
        <p>蓝牙: {{ bluetoothSwitch ? "已开启" : "已关闭" }}</p>
        <p>位置服务: {{ locationSwitch ? "已授权" : "未授权" }}</p>
      </div>
    </div>

    <div class="demo-section">
      <h3>系统设置</h3>
      <div class="settings-list">
        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">夜间模式</div>
            <div class="setting-desc">减少蓝光，保护视力</div>
          </div>
          <SwitchComponent v-model="darkMode" />
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">自动更新</div>
            <div class="setting-desc">自动下载并安装系统更新</div>
          </div>
          <SwitchComponent v-model="autoUpdate" />
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">推送通知</div>
            <div class="setting-desc">接收应用推送消息</div>
          </div>
          <SwitchComponent v-model="notifications" />
        </div>

        <div class="setting-item">
          <div class="setting-info">
            <div class="setting-title">数据同步</div>
            <div class="setting-desc">同步数据到云端</div>
          </div>
          <SwitchComponent v-model="dataSync" />
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>禁用状态</h3>
      <div class="demo-items">
        <SwitchComponent
          v-model="disabledOn"
          label="已开启(禁用)"
          :disabled="true"
        />
        <SwitchComponent
          v-model="disabledOff"
          label="已关闭(禁用)"
          :disabled="true"
        />
      </div>
    </div>

    <div class="demo-section">
      <h3>权限控制</h3>
      <div class="permission-list">
        <div class="permission-item">
          <span class="permission-name">相机权限</span>
          <SwitchComponent
            v-model="cameraPermission"
            @change="handlePermissionChange('camera', $event)"
          />
        </div>
        <div class="permission-item">
          <span class="permission-name">麦克风权限</span>
          <SwitchComponent
            v-model="microphonePermission"
            @change="handlePermissionChange('microphone', $event)"
          />
        </div>
        <div class="permission-item">
          <span class="permission-name">存储权限</span>
          <SwitchComponent
            v-model="storagePermission"
            @change="handlePermissionChange('storage', $event)"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchComponent from "@/components/form/switch.vue";

export default {
  name: "SwitchDemo",
  components: {
    SwitchComponent,
  },
  data() {
    return {
      // 基础开关
      basicSwitch: false,

      // 设备功能开关
      wifiSwitch: true,
      bluetoothSwitch: false,
      locationSwitch: true,

      // 系统设置
      darkMode: false,
      autoUpdate: true,
      notifications: true,
      dataSync: false,

      // 禁用状态
      disabledOn: true,
      disabledOff: false,

      // 权限控制
      cameraPermission: false,
      microphonePermission: false,
      storagePermission: true,
    };
  },
  methods: {
    handlePermissionChange(type, value) {
      if (value) {
        this.$message?.success(`${type}权限已开启`);
      } else {
        this.$message?.info(`${type}权限已关闭`);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.switch-demo {
  padding: 20px;

  h2 {
    color: #333;
    margin-bottom: 30px;
  }

  .demo-section {
    margin-bottom: 40px;

    h3 {
      color: #666;
      margin-bottom: 20px;
      font-size: 16px;
    }

    .demo-row {
      display: flex;
      align-items: center;
      gap: 15px;

      span {
        color: #666;
        font-size: 14px;
      }
    }

    .demo-items {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

    .status-info {
      margin-top: 20px;
      padding: 15px;
      background: #f5f5f5;
      border-radius: 8px;

      p {
        margin: 8px 0;
        color: #666;
        font-size: 14px;
      }
    }
  }

  .settings-list {
    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border: 1px solid #eee;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: all 0.3s ease;

      &:hover {
        border-color: #4b58dc;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .setting-info {
        .setting-title {
          font-size: 16px;
          color: #333;
          margin-bottom: 5px;
          font-weight: 500;
        }

        .setting-desc {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }

  .permission-list {
    .permission-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 15px 20px;
      border: 1px solid #eee;
      border-radius: 6px;
      margin-bottom: 8px;
      background: #fff;

      .permission-name {
        font-size: 14px;
        color: #333;
      }
    }
  }
}
</style>
